<template>
	<view class="class">
		<view class="class-search">
			<view class="class-search-part" @click="cliToSearch()">
				<view class="class-search-part-img">
					<image src="../../static/search-grey.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="class-search-part-connet">
					<text class="class-search-part-text">想租什么，搜一搜</text>
				</view>
			</view>
		</view>
		<view class="class-bottom">
			<scroll-view :scroll-top="0" scroll-y="true" class="class-tab">
				<view v-for="(item,index) in cateRes" :key="index" class="class-tab-part"
					:class="{tabchange1: index == curre}" @click="tabchangebin(index,item)">
					<text style="font-size: 28rpx; color: #2f2f2f2f;"
						:class="{tabchange2: index == curre}">{{item.name}}</text>
				</view>
			</scroll-view>
			<view class="class-class">
				<view class="class-class-banner">
					<view class="class-class-banner-img">
						<image :src="imgurl+'/'+cateRes[curre].image" mode="widthFix"
							style="width: 100%; height: 100%;border-radius: 12rpx;"></image>
					</view>
				</view>
				<view class="class-product-bg">
					<view class="class-product">
						<view class="class-product-part" v-for="(item,index) in cateRes[curre].sub" :key="index"
							@click="ToClasslist(item.id)">
							<view class="class-product-part-img">
								<image :src="imgurl+'/'+ item.image" mode="widthFix" style="width: 90%;height: 100%;">
								</image>
							</view>
							<view class="class-product-part-text">
								<text style="text-align: center; font-size: 28rpx;">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl: this.$imgURL2,
				cateRes: [],
				tabchange: true,
				curre: 0,
			}
		},
		onShow() {
			uni.$once('class', (res) => {
				this.curre = res.id
				this.findCurrentIndex();
			})
		},
		onLoad(e) {
			uni.request({
				url: this.$apiUrl + 'Goods/getCategory',
				complete: (res) => {
					const data = [];
					res.data.data.forEach(item => {
						if (item.sub && item.sub.length) data.push(item)
					})
					this.cateRes = data;
					this.findCurrentIndex();
				}
			})
		},
		methods: {
			findCurrentIndex() {
				const index = this.cateRes.findIndex(item => item.id === this.curre * 1)
				index !== -1 ? this.curre = index : this.curre = 0;
			},
			tabchangebin(index, item) {
				this.curre = index
			},
			cliToSearch() {
				uni.navigateTo({
					url: '/pagesA/search/search'
				})
			},
			ToClasslist(cate_id) {
				uni.navigateTo({
					url: '/pagesA/productList/productList?cate_Id=' + cate_id
				})
			}
		},
		onShareAppMessage() {
			return {
				title: '挺想租 | 租好物分享新生活 分类',
				path: this.$mp.page.route,
				imageUrl: '/logo.jpg',
			}
		},
	}
</script>

<style>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
		background-color: white;
	}

	.class {
		height: 100%;
		overflow-y: hidden;
	}

	.class-bottom {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.class-tab {
		width: 26%;
		height: calc(100% - 50px);
		background-color: #f4f4f4;
		position: absolute;
		left: 0;
		z-index: 99;
	}

	.class-search {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f4f4f4;
	}

	.class-search-part {
		width: 90%;
		height: 70%;
		background-color: white;
		border-radius: 48rpx;
		display: flex;
		float: left;
	}

	.class-search-part-img {
		width: 80rpx;
		height: 100%;
	}

	.class-search-part-text {
		font-size: 28rpx;
		color: #efefef;
	}

	.class-search-part-connet {
		width: 400rpx;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.class-tab-part {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tabchange1 {
		background-color: white;
		border-left: solid 8rpx red;
	}

	.tabchange2 {
		font-weight: 800;
		color: #000 !important;
	}

	.class-class {
		height: calc(100% - 50px);
		width: 74%;
		background: white;
		position: absolute;
		right: 0;
		overflow: scroll;
		overflow-x: hidden;
	}

	.class-class-banner {
		width: 100%;
		height: 160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 32rpx;
	}

	.class-class-banner-img {
		width: 90%;
		height: 96%;
		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.class-product {
		width: 90%;
		display: flex;

		/* justify-content: space-around; */
		flex-wrap: wrap;
	}

	.class-product-part {
		width: 32%;
		height: 220rpx;
		margin-top: 32rpx;

	}

	.class-product-bg {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.class-product-part-img {
		width: 100%;
		height: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.class-product-part-text {
		width: 100%;
		height: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14rpx;
	}
</style>
